<template>
  <div class="video-call">
    <!-- 视频通话按钮 -->
    <div class="call-btn" :class="{ active: videoActive }" @click="handleClick"></div>

    <div class="caller-btn" :class="{ active: callerActive }" @click="callAnswerClick"></div>
    <div class="call-video-btn" :class="{ active: callVideoActive }" @click="callVideoClick"></div>

    <!-- 未接来电列表 -->
    <div class="call-missed" v-show="callMissedShow">
      <BouncedPanel title="未接通电话" @close="callMissedClose">
        <!-- 数量 -->
        <template v-slot:title>
          <div class="after">5</div>
        </template>
        <div class="content">
          <div class="list" v-for="(item, index) in state.phoneList" :key="index">
            <div class="logo-missed"></div>
            <div class="list-item">
              <div class="p1">
                <div class="text">手机：</div>
                <div class="value">{{ item.phone }}</div>
                <div class="btn-group1">
                  <div class="btn1" @click="connectedBack">回拨</div>
                  <div class="btn2" @click="connectedMissed(index)">忽略</div>
                </div>
              </div>
              <div class="p2">
                <div class="text">位置：</div>
                <div class="value">{{ item.address }}</div>
              </div>
              <div class="p3">
                <div class="text">来源：</div>
                <div class="value">{{ item.source }}</div>
              </div>
            </div>
          </div>
        </div>
      </BouncedPanel>
    </div>

    <!-- 呼叫救援来电列表 -->
    <div class="call-answer" :style="callAnswerStyle" ref="callAnswerRef" v-show="callAnswerShow">
      <BouncedPanel title="呼叫救援" @close="callAnswerClose">
        <!-- 数量 -->
        <template v-slot:title>
          <div class="after">2</div>
        </template>
        <div class="information">
          <div class="phone-information">
            <div>
              <span>手机：</span>
              <span>158*****654</span>
            </div>
            <div class="call-icon">
              <div class="hang-up"></div>
              <div class="answer" @click="answerCall"></div>
            </div>
          </div>
          <div>
            <span>位置：</span>
            <span>G2京沪高速 K200+300(南京方向)</span>
          </div>
        </div>
      </BouncedPanel>
    </div>

    <!-- 回拨电话列表 -->
    <div class="call-box" :style="callBackStyle" ref="callBackRef" v-show="callBackShow">
      <BouncedPanel title="请选择所使用的座机" @close="callBackShow = false">
        <div class="add-dial">
          <span>加拨号：</span>

          <a-space class="space">
            <a-select
              ref="select"
              v-model:value="value1"
              :options="options1"
              style="width: 100%"
              @focus="focus"
              @change="handleChange"
            ></a-select>
          </a-space>
        </div>
        <div class="phone-list">
          <div class="content" v-for="item in 10" :key="item.id">
            <span>13888888888</span>
            <span class="icon" @click="makeCall"></span>
          </div>
        </div>
      </BouncedPanel>
    </div>

    <!-- 视频通话弹框 -->
    <div class="call-video" v-show="callVideoShow" ref="callVideoRef" :style="callVideoStyle">
      <!-- 头部部分 -->
      <div class="title">
        <span class="text">
          <span class="name">视频通话</span>
          <span class="time">00:00:00</span>
        </span>
        <span class="close" @click="callVideoClose"></span>
      </div>

      <!-- 中间部分 -->
      <div class="content">
        <div class="video-box">
          <div class="dispatcher">
            <span class="video-icon"></span>
          </div>
          <div class="traffic-police">
            <span class="video-icon"></span>
          </div>
        </div>
        <div class="call-list">
          <div class="call-content">
            <a-space class="space">
              <a-select
                ref="select"
                v-model:value="value1"
                :options="options1"
                style="width: 100%"
                @focus="focus"
                @change="handleChange"
              ></a-select>
            </a-space>
            <span class="call-text">呼叫交警</span>
          </div>
        </div>
      </div>

      <!-- 底部接听挂断 -->
      <div class="call-icon">
        <div class="hang-up"></div>
        <div class="answer"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'VideoCall'
}
</script>
<script setup>
/**
 * @desc 视频通话
 * @auther 阳坤
 * @date 2022/11
 *
 **/

import BouncedPanel from '../../components/detail-panel'
import { message } from 'ant-design-vue'
import { useDraggable } from '@vueuse/core'
import { ref, reactive, watch, defineProps } from 'vue'

const props = defineProps({
  routeName: {
    // 该组件所属路由名
    type: [String],
    default: ''
  }
})

// 呼叫救援来电列表ref节点,跟弹框位置
const callAnswerRef = ref()
const callAnswerStyle = ref({})
const { x: answerLeft, y: answerTop } = useDraggable(callAnswerRef, { initialValue: { x: 787, y: 340 }})
watch(
  [answerLeft, answerTop],
  () => {
    const basePx = document.documentElement.style.fontSize.split('px')[0]
    callAnswerStyle.value = { left: answerLeft.value / basePx + 'rem', top: answerTop.value / basePx + 'rem' }
  },
  { immediate: true }
)
// 回拨电话列表ref节点,跟弹框位置
const callBackRef = ref()
const callBackStyle = ref({})
const { x: backLeft, y: backTop } = useDraggable(callBackRef, {
  initialValue: { x: 1088, y: 172 }
})
watch(
  [backLeft, backTop],
  () => {
    const basePx = document.documentElement.style.fontSize.split('px')[0]
    callBackStyle.value = { left: backLeft.value / basePx + 'rem', top: backTop.value / basePx + 'rem' }
  },
  { immediate: true }
)
// 视频通话ref节点,跟弹框位置
const callVideoRef = ref()
const callVideoStyle = ref({})
const { x: videoLeft, y: videoTop } = useDraggable(callVideoRef, {
  initialValue: { x: 473, y: 83 }
})
watch(
  [videoLeft, videoTop],
  () => {
    const basePx = document.documentElement.style.fontSize.split('px')[0]
    callVideoStyle.value = { left: videoLeft.value / basePx + 'rem', top: videoTop.value / basePx + 'rem' }
  },
  { immediate: true }
)

// 视频按钮是否高亮
const videoActive = ref(false)
// 来电按钮是否高亮
const callerActive = ref(false)
// 视频按钮是否高亮
const callVideoActive = ref(false)
// 未接通列表
const state = reactive({
  title: '未接通电话',
  phoneList: [
    {
      phone: '158*****654',
      address: 'G2京沪高速K777-K905（128KM)',
      source: '道路二维码'
    },
    {
      phone: '158*****654',
      address: 'G2京沪高速K777-K905（128KM)',
      source: '道路二维码'
    },
    {
      phone: '158*****654',
      address: 'G2京沪高速K777-K905（128KM)',
      source: '道路二维码'
    },
    {
      phone: '158*****654',
      address: 'G2京沪高速K777-K905（128KM)',
      source: '道路二维码'
    },
    {
      phone: '158*****654',
      address: 'G2京沪高速K777-K905（128KM)',
      source: '道路二维码'
    },
    {
      phone: '158*****654',
      address: 'G2京沪高速K777-K905（128KM)',
      source: '道路二维码'
    },
    {
      phone: '158*****654',
      address: 'G2京沪高速K777-K905（128KM)',
      source: '道路二维码'
    }
  ]
})
// 未接通列表弹框显示
const callMissedShow = ref(false)
// 呼叫救援弹框显示1
const callAnswerShow = ref(false)
// 回拨电话列表显示
const callBackShow = ref(false)
// 视频通话弹框显示
const callVideoShow = ref(false)

// 视频通话弹框部分
const options1 = ref([
  {
    value: '泰州高速四大队',
    label: '泰州高速四大队'
  }
])
const value1 = ref('泰州高速四大队')

/**
 * 未接通按钮点击
 */
const handleClick = () => {
  videoActive.value = !videoActive.value
  callMissedShow.value = videoActive.value
  if (!videoActive.value) callBackShow.value = false
}
/**
 * 来电按钮点击
 */
const callAnswerClick = () => {
  callerActive.value = !callerActive.value
  callAnswerShow.value = callerActive.value
}
/**
 * 视频按钮点击
 */
const callVideoClick = () => {
  callVideoActive.value = !callVideoActive.value
  callVideoShow.value = callVideoActive.value
}

/**
 * 未接通-回拨电话
 */
const connectedBack = () => {
  callBackShow.value = true
}
/**
 * 未接通-忽略电话
 */
const connectedMissed = index => {
  // TODO 调用接口删除本条
  state.phoneList.splice(index, 1)
  message.success('已忽略本条')
}
/**
 * 未接通-关闭弹框
 */
const callMissedClose = () => {
  videoActive.value = false
  callMissedShow.value = false
  callBackShow.value = false
}

/**
 * 回拨电话-拨出
 */

const makeCall = () => {
  callVideoShow.value = true
}

/**
 * 呼叫救援-接听
 */
const answerCall = () => {
  callVideoShow.value = true
}
/**
 * 呼叫救援-关闭弹框
 */
const callAnswerClose = () => {
  callerActive.value = false
  callAnswerShow.value = false
}

/**
 * 视频通话弹框部分
 */
const focus = () => {
  console.log('focus')
}
const handleChange = value => {
  console.log(`selected ${value}`)
}
/**
 * 视频通话-关闭弹框
 */
const callVideoClose = () => {
  callVideoActive.value = false
  callVideoShow.value = false
}
</script>

<style scoped lang="less">
@import url(../../styles/themes/index.less);
.video-call {
  position: relative;
}
// 视频按钮部分
.call-btn {
  width: 50px;
  height: 50px;
  cursor: pointer;
  background-image: url('../../assets/images/call/no-missed.png');
  background-size: 100% 100%;
}
.call-btn.active {
  background-image: url('../../assets/images/call/no-missed-active.png');
}

.caller-btn {
  width: 50px;
  height: 50px;
  cursor: pointer;
  position: absolute;
  left: 0%;
  bottom: 60px;
  background-image: url('../../assets/images/call/call-answer.png');
  background-size: 100% 100%;
}

.caller-btn.active {
  background-image: url('../../assets/images/call/call-answer-active.png');
}

.call-video-btn {
  width: 50px;
  height: 50px;
  cursor: pointer;
  position: absolute;
  left: 0%;
  bottom: 120px;
  background-image: url('../../assets/images/call/call-video.png');
  background-size: 100% 100%;
}

.call-video-btn.active {
  background-image: url('../../assets/images/call/call-video-active.png');
}

// 未接列表部分
.call-missed {
  width: 340px;
  position: absolute;
  right: 65px;
  bottom: 0px;

  /deep/.mz-panel-content-main {
    max-height: 410px;
  }
  .content {
    margin-top: 10px;
    width: 100%;
    // height: calc(100% - 40px);
    overflow: auto;

    .list {
      display: flex;

      .logo-missed,
      .logo-phone {
        width: 27px;
        height: 23px;
        background: url('../../assets/images/intelligent/missed.png');
        background-size: cover;
        margin-top: 27px;
        margin-right: 10px;
      }

      .list-item {
        margin-top: 15px;
        height: 80px;
        width: 95%;

        .p1,
        .p2,
        .p3 {
          display: flex;
          font-size: 14px;
          margin-bottom: 2px;

          .text {
            color: #686868;
            word-break: keep-all;
          }

          .value {
            color: #333333;
            word-wrap: break-word;
            word-break: break-all;
          }
        }

        .p1 {
          position: relative;

          .btn-group2 {
            position: absolute;
            top: -15px;
            right: 0px;
            display: flex;

            .btn1,
            .btn2 {
              color: #18a800;
              cursor: pointer;
              width: 40px;
              height: 40px;
              background: url('../../assets/images/intelligent/answer.png');
              background-size: cover;
            }

            .btn2 {
              margin-right: 20px;
              width: 40px;
              height: 40px;
              background: url('../../assets/images/intelligent/refuse.png');
              background-size: cover;
            }
          }

          .btn-group1 {
            position: absolute;
            top: 0px;
            right: 10px;
            display: flex;

            .btn1,
            .btn2 {
              color: #18a800;
              width: 45px;
              height: 23px;
              line-height: 21px;
              cursor: pointer;
              text-align: center;
              background: #edf3f9;
              border: 1px solid #18a800;
              border-radius: 2px;
            }

            .btn2 {
              margin-left: 10px;
              border: 1px solid #0099e0;
              color: #0099e0;
            }
          }
        }
      }
    }
  }
}

// 呼叫救援来电列表
.call-answer {
  width: 335px;
  z-index: 4;
  position: fixed;

  /deep/.title {
    cursor: move;
  }
  /deep/.mz-panel-content-main {
    max-height: 410px;
  }

  .information {
    padding: 10px 10px 10px 0;

    .phone-information {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 5px;

      .call-icon {
        display: flex;
        justify-content: center;
        height: 40px;

        .hang-up {
          background-image: url('../../assets/images/intelligent/refuse.png');
        }
        .answer {
          background-image: url('../../assets/images/intelligent/answer.png');
          margin-left: 20px;
        }

        .hang-up,
        .answer {
          width: 40px;
          height: 40px;
          background-size: 100% 100%;
          cursor: pointer;
        }
      }
    }
  }
}

// 回拨电话列表
.call-box {
  width: 340px;
  height: 185px;
  position: fixed;
  z-index: 3;
  /deep/.title {
    cursor: move;
  }

  .add-dial {
    display: flex;
    align-items: center;
    padding-right: 14px;
    margin: 10px 0;
    padding: 0 20px;

    .space {
      flex: 1;

      /deep/.ant-space-item,
      /deep/.ant-select {
        width: 100%;
      }
    }
  }
  .phone-list {
    flex: 1;
    overflow-y: auto;
    .content {
      height: 27px;
      align-items: center;
      padding: 0 30px 0 20px;
      display: flex;
      justify-content: space-between;
      cursor: pointer;
      .icon {
        width: 16px;
        height: 16px;
        background-image: url('../../assets/images/intelligent/phone.png');
        background-size: 100% 100%;
        cursor: pointer;
      }
    }
    .content:hover {
      background: #e3ebf6;
    }
  }
}

// 视频通话弹框
.call-video {
  width: 348px;
  height: 449px;
  z-index: 5;
  position: fixed;
  // left: 473px;
  // top: 83px;
  display: flex;
  flex-direction: column;
  background: #403638;
  z-index: 9;
  .title {
    height: 30px;
    background: #201b1c87;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    align-items: center;
    cursor: move;
    .text {
      font-size: 14px;
      color: #ffffff;
    }
    .close {
      cursor: pointer;
      background-image: url('../../components/detail-panel/images/close.png');
      width: 13px;
      height: 13px;
      background-size: 100% 100%;
    }
  }

  .content {
    display: flex;
    flex: 1;
    justify-content: space-between;
    padding: 20px 10px;

    .video-box {
      width: 40%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .dispatcher,
      .traffic-police {
        height: 47%;
        background: #737373;
        border: 1px solid #266bf3;
        display: flex;
        align-items: center;
        justify-content: center;
        .video-icon {
          width: 48px;
          height: 52px;
        }
      }

      .dispatcher {
        .video-icon {
          background-image: url('../../assets/images/call/customer-service.png');
          background-size: 100% 100%;
        }
      }
      .traffic-police {
        .video-icon {
          background-image: url('../../assets/images/call/traffic-police.png');
          background-size: 100% 100%;
        }
      }
    }
    .call-list {
      width: 55%;

      .call-content {
        height: 32px;
        line-height: 32px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .space {
          width: 100px;
          height: 100%;
          /deep/.ant-space-item,
          /deep/.ant-select,
          /deep/.ant-select-selector {
            width: 100%;
            font-size: 12px;
          }
        }
        .call-text {
          background: #10c161;
          border-radius: 3px;
          padding: 0px 10px;
          height: 100%;
          color: #fff;
          margin-left: 10px;
          font-size: 12px;
          cursor: pointer;
          min-width: 68px;
          word-break: keep-all;
        }
      }
    }
  }

  .call-icon {
    display: flex;
    justify-content: center;
    height: 40px;
    margin-bottom: 20px;

    .hang-up {
      background-image: url('../../assets/images/intelligent/refuse.png');
    }
    .answer {
      background-image: url('../../assets/images/intelligent/answer.png');
      margin-left: 40px;
    }

    .hang-up,
    .answer {
      width: 40px;
      height: 40px;
      background-size: 100% 100%;
      cursor: pointer;
    }
  }
}

.after {
  font-size: 16px;
  font-weight: 600;
  color: #ff3131;
  font-family: 'pangmenzhengdaoregular';
}
</style>
